<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// !#1 准备一个响应式的空数组
const list = ref([])

// !#2 封装请求方法
const getList = async () => {
  const r = await axios.get('/list')
  // !不要忘了加 .value
  list.value = r.data
}

/* onMounted(() => {
  getList()
}) */
// onMounted(getList)
// !#3 调用一下
getList()

const deleteItem = async (id) => {
  await axios.delete(`/del?id=${id}`)
  ElMessage.success('删除成功')
  getList()
}
</script>

<template>
  <div class="app">
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="place" label="地址" />
      <el-table-column label="操作">
        <!-- Vue2 -->
        <!-- <template scope-slot="{ row }"> -->
        <!-- //!推荐 -->
        <!-- <template v-slot="{ row }"> -->
        <!-- <template v-slot:default="{ row }"> -->
        <!-- v-slot: 等价于 # 号 -->
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="deleteItem(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style>
.app {
  width: 980px;
  margin: 100px auto 0;
}
</style>